<template>
    <div class="preMonth">
       <h3 class="title">近一个月应急仓使用|人次</h3>
       <div class="pmChart" id="pmChart"></div>
    </div>
</template>

<script>
import {getDateOfMonthAgo} from '../js/tool'
import {monthAgoDays} from '../js/api'
export default {
    data(){
        return{
            option:{
                y:'center',
                tooltip : {
                    trigger: 'axis',
                    axisPointer : { // 坐标轴指示器，坐标轴触发有效
                        type : 'line'// 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend:{
                    data:['96121','气象网'],
                    textStyle:{
                        color: '#7B8FB1'
                    },
                    right:'0',
                    top:'0',  
                    itemWidth:5,
                    itemHeight:10    
                },
                grid:{
                    left: '5%',
                    right: '4%',
                    top:'5%',
                    bottom:'5%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#83D7F4',
                            }
                        },
                        axisLabel: {
                            color: '#7B8FB1'
                        },
                        axisTick: {
                            show:false,
                        },
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: '#4990B7',
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#83D7F4',
                            }
                        },
                        axisLabel: {
                            color: '#7B8FB1'
                        },
                        axisTick: {
                            show:false,
                        },
                    }
                ],
                series : [
                   {
                        type: 'bar',
                        barWidth: 8.5,
                        itemStyle:{
                            normal:{
                                color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#0DD8FC'
                                }, {
                                    offset: 1,
                                    color: '#040E31'
                                }], false)
                            }
                        },
                        data: [500,600,650,550,555,555,565,583,788,766,655,583,537,583,589,744,733,722,712,823,823,812,811,911,967,967,738,823,822]
                   }
                ]
            }
        }
    },
    methods:{
        init(){
            var pmChart = document.getElementById('pmChart')
            let fsize = document.body.clientWidth/1920*16
            pmChart.style.height = document.body.clientWidth<=1920? fsize*14+'px':'14rem'
            var myChart = this.$echarts.init(pmChart); 
            myChart.setOption(this.option)
        }
    },
    created(){
        this.option.xAxis[0].data = getDateOfMonthAgo()
        monthAgoDays().then(res=>{
            console.log(res)
        })
    },
    mounted(){
        this.init()
    }
}
</script>
<style lang="scss" scoped>
    .preMonth{
        border:.05rem solid #597FBB;
        background: #040E31;
        margin-top:1rem;
        display:flex;
        flex-direction: column;
        .title{
            height:2.3rem;
            width:18rem;
            line-height:2.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
        }
        .pmChart{
            width:100%;
            margin-top:.5rem;
        }
    }
</style>